<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度地图示例</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <style>
        #map {
            width: 100%;
            height: 400px;
            margin-top: 20px;
        }
    </style>
</head>
<body class="bg-gray-100 p-4">
<h1 class="text-2xl font-bold mb-4">武汉地址列表</h1>
<ul id="addressList" class="space-y-2">
    <li class="bg-white p-4 rounded shadow">
        <span>地址1：武汉黄鹤楼 - 经度：114.298569，纬度：30.557446</span>
        <button onclick="openBaiduMap(114.298569, 30.557446)" class="ml-4 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">查看地图</button>
    </li>
    <li class="bg-white p-4 rounded shadow">
        <span>地址2：武汉大学 - 经度：114.358147，纬度：30.537858</span>
        <button onclick="openBaiduMap(114.358147, 30.537858)" class="ml-4 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">查看地图</button>
    </li>
    <li class="bg-white p-4 rounded shadow">
        <span>地址3：东湖绿道 - 经度：114.351947，纬度：30.544474</span>
        <button onclick="openBaiduMap(114.351947, 30.544474)" class="ml-4 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">查看地图</button>
    </li>
    <li class="bg-white p-4 rounded shadow">
        <span>地址4：武汉长江大桥 - 经度：114.290603，纬度：30.543477</span>
        <button onclick="openBaiduMap(114.290603, 30.543477)" class="ml-4 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">查看地图</button>
    </li>
    <li class="bg-white p-4 rounded shadow">
        <span>地址5：湖北省博物馆 - 经度：114.354938，纬度：30.545392</span>
        <button onclick="openBaiduMap(114.354938, 30.545392)" class="ml-4 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">查看地图</button>
    </li>
</ul>
<script>
    function openBaiduMap(lng, lat) {
        var url = "http://api.map.baidu.com/direction?origin=latlng:"+lng+","+lat+"|name:我家&destination=大雁塔&mode=driving&region=西安&output=html&src=webapp.baidu.openAPIdemo"

        window.open(url, '_blank');
    }
</script>
</body>
</html>
